<template>
    <div>
        <h3>v3的计算属性computed</h3>
        <h3>一个人的信息</h3>
        姓：<input type="text" v-model="personx.firstName">
        <br>
        名：<input type="text" v-model="personx.lastName">
        <br>
        <span>全名：{{personx.fullName}}</span>
        <span>年龄:{{personx.ages}}</span>
        <br>
        全名：<input type="text" v-model="personx.fullName">
    </div>

    <hr>
    <h3>v3的watch</h3>
    <div>当前求和为：{{sum}}</div>
    <button @click="sum++">点我+1</button>
    <div>当前的信息为：{{msg}}</div>
    <button @click="msg+='！'">修改信息</button>
    <br>
    <br>
    <div>姓名：{{person.name}} ; 年龄：{{person.age}}  ; 薪资：{{person.job.j1.salary}}K</div>
    <button @click="person.name+='~'">修改姓名</button>
    <button @click="person.age++">增长年龄</button>
    <button @click="person.job.j1.salary++">涨薪</button>
    <hr>
</template>

<script  setup>
    import {ref,reactive,watch,computed} from 'vue'
    //数据
    let personx = reactive({
        firstName:'张',
        lastName:'三',
        age:10
    })
    //计算属性——简写（没有考虑计算属性被修改的情况）
    /* person.fullName = computed(()=>{
        return person.firstName + '-' + person.lastName
    }) */
    personx.ages = computed(()=>{
        return personx.age*2
    })
    //计算属性——完整写法（考虑读和写）强 、、  当直接修改计算属性会报 只读的错误警告 此时的set启到 可以赋值的作用（或者是v-model=计算属性的时候也会出现这个问题）
    // 例: personx.fullName = "xxx"
    personx.fullName = computed({
        get(){
            return personx.firstName + '——' + personx.lastName
        },
        set(value){
            const nameArr = value.split('——')
            personx.firstName = nameArr[0]
            personx.lastName = nameArr[1]
        }
    })


    const x = reactive({a:'a'})
    const x2 = ref(20);


    // ref定义基本数据
    let sum = ref(0)
    let msg = ref('你好啊')
    // reactive 定义 对象
    let person = reactive({
        name:'张三',
        age:18,
        job:{
            j1:{
                salary:20
            }
        }
    })
    /*      let person2 = ref({
            name:'张三',
            age:18,
            job:{
              j1:{
                salary:20
              }
            }
          })
          // 使之生效 必须  写成person.value(求助reactive) 或者手动加深度监听
                watch(person,(newValue,oldValue)=>{
                    console.log('person的值变化了',newValue,oldValue)
                },{deep:true})
          */


    // watch(参数一，参数二，参数三) v3的深度监听有点问题 deep：true，watch函数可以写多个
    //情况一：监视ref所定义的一个响应式数据  sum.value  不能这样监视(因为变成了具体的值 不是监视变量了)
    /* watch(sum,(newValue,oldValue)=>{
        console.log('sum变了',newValue,oldValue)
    },{immediate:true}) */

    //情况二：监视ref所定义的多个响应式数据newValue oldValue 也是数组 （这种感觉不好用）
    watch([sum,msg],(newValue,oldValue)=>{
        console.log('sum或msg变了',newValue,oldValue)
    },{immediate:true})

    /*
        情况三：监视reactive所定义的一个响应式数据的全部属性
                1.注意：此处无法正确的获取oldValue
                2.注意：强制开启了深度监视（deep配置false无效）  */

    watch(person,(newValue,oldValue)=>{
        console.log('person整体变化了',newValue,oldValue)
    },{deep:false}) //此处的deep配置无效

    //情况四：监视reactive所定义的一个响应式数据中的某个属性( 写成回调函数式 )
    watch(()=>person.name,(newValue,oldValue)=>{
        console.log('person的name属性变化了',newValue,oldValue)// 能获取正确的oldValue
    })

    //情况五：监视reactive所定义的一个响应式数据中的某些属性
    /* watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
        console.log('person的name或age变化了',newValue,oldValue)
    })  */

    //特殊情况  监视对象里面的对象的属性 需要开启 深度监听(但是这里也拿不到oldValue)
    watch(()=>person.job,(newValue,oldValue)=>{
        console.log('person的job变化了',newValue,oldValue)
    },{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效
</script>

<style scoped>

</style>